<template>
    <view>
        <view class="goods-list">
            <view v-for="(goods,i) in goodsList" :key="i" @click="gotoDetail(goods)">
                <!--商品列表 子组件: -->
                <my-goods :goods="goods"></my-goods>                 
            </view>                
        </view>            
    </view>
</template>

<script>
    export default {
        data(){
            return {
                //请求参数对象
                queryObj:{
                    //查询关键词
                    query:"",
                    //商品分类ID
                    cid:"",
                    //页码
                    pagenum:1,
                    //每页显示多少条数据
                    pagesize:15
                },
                
                //商品列表的数据
                goodsList:[],
                //总数量,用来实现分页
                total:0,
                //是否正在请求数据,节流阀
                isloading:false
            }
        },
        onLoad(options){
            //将页面参数转存到this.queryObj对象中
            this.queryObj.query=options.query || ""
            this.queryObj.cid=options.cid || ""
            //console.log(this.queryObj)
            
            //调用获取商品列表的数据方法
            this.getGoodsList()
        },        
        methods: {
            //获取商品列表数据方法,接收下拉刷新cb回调函数
            async getGoodsList(cb){
                //打开节流阀
                this.isloading=true
                //发送请求,传送参数this.queryObj
                const {data:res} = await uni.$http.get("/api/public/v1/goods/search",this.queryObj)
                //关闭节流阀
                this.isloading=false
                
                //只要数据请求完毕,就立即按需调用CB回调函数
                //短路运算符&&:如果cb存在,就调用
                cb && cb()
                
                if(res.meta.status!==200) return uni.$showMsg()
                //console.log(res.message)
                //为数据赋值,通过展开运算符的形式,进行旧 新数据的拼接
                this.goodsList=[...this.goodsList,...res.message.goods]
                this.total=res.message.total
            },
            // 点击跳转到详情页面
            gotoDetail(goods){
                uni.navigateTo({
                    url:"/subpkg/goods_detail/goods_detail?goods_id="+goods.goods_id
                })
            }
        },
        //触底事件:
        onReachBottom(){
            //判断数据是否加载完毕
            if(this.queryObj.pagenum*this.queryObj.pagesize>=this.total) return uni.$showMsg("数据加载完毕")
            // 判断是否正在请求其它数据,如果是,则不发起额外的请求
            if(this.isloading) return
            
            //让页码值自增+1
            this.queryObj.pagenum++
            //重新获取列表数据
            this.getGoodsList()           
        },
        //下拉刷新的事件:
        onPullDownRefresh(){
            //1. 重置关键数据
            this.queryObj.pagenum=1
            this.total=0
            this.isloading=false
            this.goodsList=[]
            //2. 重新发起请求后,传一个回调函数进去,关闭下拉刷新
            this.getGoodsList(()=>uni.stopPullDownRefresh())
        }
    }
</script>

<style lang="scss">

</style>
